<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
				max-width: 640px;
			}

			p {
				margin: 30px 10px;
			}
		</style>

	</head>

	<body>

		<div id="menu"></div>

		<br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br />
		<a href="#">Some Link</a>

		<script type="text/javascript" charset="utf-8">
		
			if (window.widget) {
				widget.setNavigationEnabled(false);
			}

			var init = function() {

				var optionsmenu = new Nokia.OptionsMenu({
					element: '#menu',
					transitions: false,

					show: function(event) {
						console.log("show", event);
					},

					hide: function(event) {
						console.log("hide", event);
					}
				});

				var section1 = new Nokia.OptionsMenuSection({
					label: 'File'
				});

				var section2 = new Nokia.OptionsMenuSection({
					label: 'Edit'
				});

				var option1 = new Nokia.OptionsMenuItem({
					label: 'New',
					select: function() {
						alert('This creates a new file.');
					}
				});

				var option2 = new Nokia.OptionsMenuItem({
					label: 'Open',
					select: function() {
						alert('This opens a new file.');
					}
				});

				var option3 = new Nokia.OptionsMenuItem({
					label: 'Save',
					select: function() {
						alert('This saves the current file.');
					}
				});

				var option4 = new Nokia.OptionsMenuItem({
					label: 'Save as...',
					select: function() {
						alert('This saves the current file.');
					}
				});

				var option5 = new Nokia.OptionsMenuItem({
					label: 'Undo',
					select: function() {
						alert('This undo last change');
					}
				});

				var option6 = new Nokia.OptionsMenuItem({
					label: 'Redo',
					select: function() {
						alert('This redo last change.');
					}
				});

				section1.addItem(option1);
				section1.addItem(option2);
				section1.addItem(option3);
				section1.addItem(option4);

				section2.addItem(option5);
				section2.addItem(option6);

				optionsmenu.addSection(section1);
				optionsmenu.addSection(section2);
				
				section1.removeItem(option2);

				optionsmenu.create();
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
				
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('optionsmenu', init);

		</script>

	</body>
</html>